<template>
 <div>   <a-button type="primary" @click="goback" class="toBackbtn">返回管理日志</a-button>
<!-- 添加返回首页按钮 和返回创作列表按钮 -->
<a-button type="primary" @click="gobackShowBlogs" class="toBackbtn">返回首页</a-button>
</div>
    <main class="details w-e-text shadow">
      <h1 class="title">{{ article.title }}</h1>
      <a-tag color="#42A5F5" class="type"> {{ article.type }}</a-tag>
      <a-alert
        :message="article.synopsis"
        type="info"
        class="synopsis"
        show-icon
        v-if="article.synopsis"
      >
     
        <template #icon><CommentOutlined /></template>
</a-alert>

<main v-html="article.content"></main>

</main>
</template>

<script>
    //引入返回列表所需的函数
    import {

        useRoutePathToPage,
    } from "@u/router.js";
    import {
        ref,
        watchEffect
    } from "vue";
    import {
        Alert
    } from "ant-design-vue";
    import {
        CommentOutlined
    } from "@ant-design/icons-vue";
    import {
        useLinkedRouterParam
    } from "@u/route";
    import http from "@u/http";
    import {
        useInfoNotice
    } from "@u/notice";
    import {
        useWindowScrollTo
    } from "@u/scroll";
    import "wangeditor"; //引入这个防止表格标签丢失  加载里面的css
    export default {
        components: {
            CommentOutlined,
            AAlert: Alert,
        },
        setup() {
            const id = useLinkedRouterParam("id");
            const article = ref({});
            useWindowScrollTo({
                top: 0
            }, "auto");
            watchEffect(
                async() => {
                    try {
                        const res = await http.get(`/articles/${id.value}`);
                        article.value = res.data;
                    } catch (error) {
                        useInfoNotice({
                            message: "文章获取失败",
                            description: error.data || error.reason || "未知错误",
                        });
                    }
                }, {
                    flush: "post",
                }
            );
            //定义一个返回列表的按钮
            const goback = () => {
                const toPage = useRoutePathToPage(`/manage/articles/1`);
                toPage();
            };
            const gobackShowBlogs = () => {
                const toPageBlogs = useRoutePathToPage(`/show/blogs/1`);
                toPageBlogs();
            };
            return {
                article,
                goback,
                gobackShowBlogs
            };
        },
    };
</script>

<style scoped>
    .details {
        margin: 20px;
        padding: 20px;
        background-color: #ffffff;
        border: 1.5px solid #b0bec5;
        border-radius: 4px;
        position: relative;
        min-height: 100vh;
    }
    
    .title {
        text-align: center;
    }
    
    .type {
        position: absolute;
        top: 10px;
        right: 10px;
    }
    
    .synopsis {
        margin-bottom: 20px;
    }
    
    .toBackbtn {
        margin-left: 20px;
        margin-top: 40px;
    }
</style>